<template>
    <div style="margin: 10px;">
        <el-skeleton :loading="data.isfirst" animated :rows="10">
            <el-descriptions title="新增客户" border direction="vertical" :column="3">
                <el-descriptions-item label="客户名称*" width="33%">
                    <el-input type="text" v-model="data.request.name"></el-input>
                </el-descriptions-item>
                <el-descriptions-item label="电话*" width="33%">
                    <el-input type="text" maxlength="11" v-model="data.request.phone"></el-input>
                </el-descriptions-item>
                <el-descriptions-item label="微信*" width="33%">
                    <el-input type="text" v-model="data.request.wechat"></el-input>
                </el-descriptions-item>
                <el-descriptions-item label="地址*" width="33%">
                    <el-input type="text" v-model="data.request.address"></el-input>
                </el-descriptions-item>           
                <el-descriptions-item label="跟踪时间*" width="33%">
                    <el-date-picker style="width:100%" v-model="data.request.followtime" type="date"
                        placeholder="首次跟进时间" />
                </el-descriptions-item>

                <el-descriptions-item label="下次联系时间*" width="33%">
                    <el-date-picker style="width:100%" v-model="data.request.nexttime" type="date"
                        placeholder="约定下次跟进时间" />
                </el-descriptions-item>
                <el-descriptions-item label="进入公海时间*" width="33%">
                    <el-date-picker style="width:100%" v-model="data.request.sears" type="date"
                        placeholder="约定下次跟进时间" />
                </el-descriptions-item>
               
                <el-descriptions-item label="负责人(不填时默认为自己)*" width="33%">
                    <el-select v-model="data.request.responsibility"  filterable remote reserve-keyword
                        placeholder="请输入关键词" :remote-method="event.remoteMethod" :loading="data.loading">
                        <el-option v-for="item in data.responsibility_list" :key="item.id" :label="item.name"
                            :value="item.id">
                            <el-tag type="danger">{{ item.name }}</el-tag>
                        </el-option>   
                    </el-select>

                </el-descriptions-item>

                <el-descriptions-item label="备案人(必填)*" width="33%">
                    <el-select v-model="data.request.record"  filterable remote reserve-keyword
                        placeholder="请输入关键词" :remote-method="event.remoteMethod" :loading="data.loading">
                        <el-option v-for="item in data.record_list" :key="item.id" :label="item.name"
                            :value="item.id">
                            <el-tag type="danger">{{ item.name }}</el-tag>
                        </el-option>
                   
                    </el-select>
                </el-descriptions-item>

               
                <el-descriptions-item label="类别*" width="33%">
                    <el-select style="width:100%" v-model="data.request.type" placeholder="客户类别" size="large">
                        <el-option v-for="item in data.type_list" :key="item.id" :label="item.name" :value="item.id" >
                            <el-tag type="primary">{{ item.name }}</el-tag>
                        </el-option>

                    </el-select>
                </el-descriptions-item>
                <el-descriptions-item label="来源*" width="33%">
                    <el-select style="width:100%" v-model="data.request.source" placeholder="客户来源" size="large">
                        <el-option v-for="item in data.cus_list" :key="item.id" :label="item.name" :value="item.id" >
                            <el-tag type="primary">{{ item.name }}</el-tag>
                        </el-option>

                    </el-select>
                </el-descriptions-item>
                <el-descriptions-item label="级别*" width="33%">
                    <el-select style="width:100%" v-model="data.request.level" placeholder="成功级别" size="large">
                        <el-option v-for="item in data.level_list" :key="item.id" :label="item.name" :value="item.id" >
                            <el-tag type="primary">{{ item.name }}</el-tag>
                        </el-option>
                    </el-select>
                </el-descriptions-item> 
                <el-descriptions-item label="备注(选填)*" :span="3">
                    <el-input type="text" v-model="data.request.remark"></el-input>
                </el-descriptions-item>        
                <el-descriptions-item label="操作" :span="1">
                    <el-popconfirm @confirm="event.add" title="确认要新增吗？" >
                        <template #reference>
                            <el-button type="primary" :disabled="!event.check()">新增</el-button>
                        </template>               
                    </el-popconfirm>
                </el-descriptions-item>
            </el-descriptions>
        </el-skeleton>
    </div>
</template>

<script setup lang="ts">
import { add_customer, GetAllUsers } from '@/api/customer';
import { get_Dictionary_ByKey } from '@/api/dic';
import type customer_Add_Dto from '@/Dto/Request/customer/customer_Add_Dto';
import Api_Code from '@/Dto/Response/Api_code';
import { onMounted, reactive, watchEffect } from 'vue';
import dayjs from 'dayjs'
import router from '@/router';
import { msg } from '@/utils/msg';
import { closeloading, startloading } from '@/utils/loading';
import { da } from 'element-plus/es/locales.mjs';

const data = reactive<customer_Add_Dto>({
    request: {
        name: '',
        phone: '',
        wechat: '',
        address: '',
        date: '',
        responsibility: '',
        remark: '',
        nexttime: '',
        sears:'',
        followtime:'',
        record:'',
        type:'',
        source:'',
        level:'',
    },
    isfirst:true,
    type_list: [],
    cus_list: [],
    level_list: [],
    record_list:[],
    loading:false,
    responsibility_list: [],
})

const event = {
    check() {
        if (data.request.name.trim().length === 0 || data.request.phone.length != 11 ||
            data.request.wechat.trim().length === 0 || data.request.address.trim().length === 0 ||
            data.request.followtime === "" || data.request.nexttime === "" || data.request.sears === "" ||
            data.request.record === "" || data.request.type === "" || data.request.level === "" || data.request.source === ""
        ) {
            return false
        }
        return true
    },
   async remoteMethod(query:string){
        if (query !== '') {
            data.loading = true;
            const res = await GetAllUsers({
                key: query
            });
            data.loading = false;
            if (res.code === 0) {
                data.responsibility_list = res.data;
                data.record_list=res.data;
            } else {
                data.responsibility_list = [];
                data.record_list=[];
            }
        }
    },
   async add() {    
  
       startloading();
        const res=await add_customer({
           ...data.request,
           responsibility:data.request.responsibility==''?'':data.request.responsibility,
           nexttime:dayjs(data.request.nexttime).format('YYYY-MM-DD'),
           followtime:dayjs(data.request.followtime).format('YYYY-MM-DD'),
           sears:dayjs(data.request.sears).format('YYYY-MM-DD')
        })
        closeloading();
        if(res.code===0){
           msg(res)
           router.back();
        }else{
            msg(res)
        }
    }
}

const methods = {
    async bind() {
        const res = await get_Dictionary_ByKey({
            keys: ['customer_record_result', 'customer_source', 'vip_level']
        })
        if (res.code === Api_Code.ok) {
            data.type_list = res.data.filter((d: any) => d.key === 'vip_level');
            data.level_list = res.data.filter((d: any) => d.key === 'customer_record_result');
            data.cus_list = res.data.filter((d: any) => d.key === 'customer_source');  
            data.isfirst=false;  
        }
    },
   

}


watchEffect(async()=>{
       await  methods.bind();

})



</script>

<style scoped></style>